<template>
  <div class="sc-container">
    <table>
      <colgroup>
        <col width="126">
        <col width="226">
        <col width="133">
        <col width="133">
        <col width="133">
        <col width="133">
        <col width="133">
        <col width="226">
      </colgroup>
      <thead>
        <tr>
          <th>图片</th>
          <th>描述</th>
          <th>单价</th>
          <th>尺寸</th>
          <th>颜色</th>
          <th>数量</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item">
          <td>
            <img src="https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/TB2bpqXarvpK1RjSZFqXXcXUVXa_!!3417956174-0-item_pic.jpg_160x160q90.jpg" alt="">
          </td>
          <td>马丁靴女鞋秋季2019年潮鞋新款秋鞋秋冬季加绒百搭英伦风短靴冬鞋</td>
          <td>￥163</td>
          <td>32</td>
          <td>红色</td>
          <td>2</td>
          <td>浙江温州至 北京</td>
          <td>
            <button>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="buy">
      <button class="buy-btn" @click="buy">结算</button>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'products',
  data () {
    return {
      items: 3,
      imgurl: 'https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/TB2bpqXarvpK1RjSZFqXXcXUVXa_!!3417956174-0-item_pic.jpg_160x160q90.jpg'
    }
  },
  methods: {
    buy () {
      // this.items = 0
      // location.href = '/order'
      this.$prompt('当前包含写库操作，请输入管理员密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value === '246799') {
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.sc-container
  padding 10px
  text-align left
  table
    table-layout fixed
    border-collapse collapse
    th,td
      padding 20px 10px
    tr
      border-bottom 1px solid rgb(184,184,184)
    img
      height 120px
  .buy
    text-align right
    padding 5px
    button
      width 65px
      height 30px
      background #c0392b
      outline none
      cursor pointer
      &:hover
        background #e74c3c
</style>
